<#assign base=request.contextPath />
<!doctype html>
<html lang="en" class="fixed">

<head>
    <meta charset="UTF-8">
    <title>Ikaros</title>
    <#include "../commons/headImport.ftl">
    <link rel="stylesheet" href="${base}/static/vendor/data-table/media/css/dataTables.bootstrap.min.css">
</head>

<body>
<div class="wrap">
    <#include "../commons/page-header.ftl">
    <div class="page-body">
    <#include "../commons/left-sidebar.ftl">
        <#--content start-->
    <div class="content" id="userList">
        <div class="content-header">
            <div class="leftside-content-header">
                <ul class="breadcrumbs">
                    <li><i class="fa fa-table" aria-hidden="true"></i><a href="#">Tables</a></li>
                    <li><a>Data-table</a></li>
                </ul>
            </div>
        </div>
        <div class="row animated fadeInRight">
            <div class="col-sm-12">
                <div class="panel">
                    <div class="panel-content">
                        <form class="form-search form-inline">
                            <input class="form-control input-sm" type="search" /> <button type="submit" class="btn">查找</button>
                        </form>
                        <div class="table-responsive">
                            <table id="basic-table" class="<#--data-table--> table table-striped nowrap table-hover table-bordered text-center" cellspacing="0" width="100%">
                                <thead>
                                <tr>
                                    <th>排序</th>
                                    <th>用户名</th>
                                    <th>邮箱</th>
                                    <th>电话</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <#if list??>
                                    <#list list as user>
                                    <tr>
                                        <td>${user_index+1}</td>
                                        <td>${user.username}</td>
                                        <td>${user.email}</td>
                                        <td>${user.mobile}</td>
                                        <td>${user.statusEnum.msg}</td>
                                        <td>
                                            <div class="btn-group btn-group-xs">
                                                <@shiro.hasPermission name="sys:user:list" >data-update="true"</@shiro.hasPermission>
                                                <button class="btn btn-transparent" data-toggle="modal" data-target="#primary-modal" v-on:click="getUser(${user.userId})"><i class="fa fa-eye"></i>
                                                </button>
                                                <button class="btn btn-transparent"><i class="fa fa-pencil"></i>
                                                </button>
                                                <button class="btn btn-transparent"><i class="fa fa-times"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    </#list>
                                </#if>
                                </tbody>
                            </table>

                            <div class="col-md-12 column" style="text-align: right">
                                <ul class="pagination">
                                    <li><a href="#">Prev</a></li>
                                    <li><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">5</a>
                                    </li>
                                    <li><a href="#">Next</a></li>
                                </ul>
                            </div>
                        </div>

                        <!--PRIMARY modal-->
                        <!-- Modal -->
                        <div class="modal fade" id="primary-modal" tabindex="-1" role="dialog" aria-labelledby="modal-primary-label">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header state modal-primary">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" id="modal-primary-label"><i class="fa fa-user"></i>Primary Modal</h4>
                                    </div>
                                    <div class="modal-body">
                                        <#--start-->
                                            <div class="panel-content">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <form id="inline-validation" class="form-horizontal form-stripe">
                                                            <div class="form-group">
                                                                <label for="name" class="col-sm-3 control-label">用户名<span class="required">*</span></label>
                                                                <div class="col-sm-6">
                                                                    <input type="text" class="form-control" v-model="username" readonly>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="username" class="col-sm-3 control-label">邮箱<span class="required">*</span></label>
                                                                <div class="col-sm-6">
                                                                    <input type="text" class="form-control" v-model="email" readonly>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="email" class="col-sm-3 control-label">电话<span class="required">*</span></label>
                                                                <div class="col-sm-6">
                                                                    <input type="email" class="form-control" v-model="mobile" readonly>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="text" class="col-sm-3 control-label">状态<span class="required">*</span></label>
                                                                <div class="col-sm-6">
                                                                    <input type="text" class="form-control" v-model="status" <#--required--> readonly>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="cofirmation" class="col-sm-3 control-label">性别<span class="required">*</span></label>
                                                                <div class="col-sm-6">
                                                                    <input type="text" class="form-control" v-model="sex" readonly>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        <#--end-->
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <#--model end-->
                    </div>
                </div>
            </div>
        </div>
    </div>
        <#--content end-->

    </div>
</div>
<#include "../commons/foot.ftl">
<script src="${base}/static/vendor/nano-scroller/nano-scroller.js"></script>
<script src="${base}/static/javascripts/template-script.min.js"></script>
<script src="${base}/static/javascripts/template-init.min.js"></script>
<#--data-tables.js是用来实现分页和搜索的-->
<#--<script src="${base}/static/vendor/data-table/media/js/jquery.dataTables.min.js"></script>
<script src="${base}/static/vendor/data-table/media/js/dataTables.bootstrap.min.js"></script>&ndash;&gt;
<script src="${base}/static/javascripts/examples/tables/data-tables.js"></script>-->
<script src="${base}/static/javascripts/axios.min.js"></script>
<script>
    new Vue({
        el: '#userList',
        data: {
            username:"",
            email:"",
            mobile:"",
            status:"",
            sex:""
        },
        methods: {
            getUser: function (userId) {
                //这样可以吧data中的数据用that.msg=xx设置
                var that = this
                axios.get('${base}/admin/user/info/'+userId).then(function (result) {
                    /*{data: {…}, status: 200, statusText: "", headers: {…}, config: {…}, …}*/
                    console.log(result.data)
                    that.username=result.data.username,
                    that.email=result.data.email;
                    that.mobile=result.data.mobile;
                    that.status=result.data.status;
                    that.sex=result.data.sex;
                }).catch(function (error) {
                    console.log(error);
                });
            }
        }
    })
</script>
</body>
